<link type="text/css" rel="stylesheet" href="/styles/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="/styles/jsgrid-theme.min.css" />
<script type="text/javascript" src="/js/jsgrid.min.js"></script>
<div id="jsGrid"></div>
<script>
  $('#search-box').keyup(function(e){
    if (e.keyCode == 13) {
      var q = $('#search-box').val();
      $.get('/api/search/?q='+q, function (call) {
        var products = call;
        console.log(call);
        $("#jsGrid").jsGrid({
          width: "100%",
          height: "800px",

          inserting: false,
          editing: false,
          sorting: false,
          paging: true,
          selecting: true,
          filtering: false,
          data: products,

          fields: [
            {
              headerTemplate: function() {
                return $("<button>").attr("type", "button").text("聚合")
                  .on("click", function () {
                    groupSelectedItems();
                  });
              },
              itemTemplate: function(_, item) {
                return $("<input>").attr("type", "checkbox")
                  .prop("checked", $.inArray(item, selectedItems) > -1)
                  .on("change", function () {
                    $(this).is(":checked") ? selectItem(item) : unselectItem(item);
                  });
              },
              align: "center",
              width: 50
            },
            { name: "brand", type: "text", width: 150, validate: "required" },
            { name: "brief_name", type: "text", width: 150 },
            { name: "category", type: "text", width: 150 },
            { name: "sn", type: "text", width: 100 },
            { name: "model", type: "text",width: 100 },
            { name: "pinyin", type: "text", width: 100},
            { name: "msrp", type: "text", width: 100},
            { name: "version", type: "text", width: 50}
          ],

          controllers: {
            loadData: function(filter) {

            }
          },
        });
        var selectedItems = [];

        var selectItem = function(item) {
          selectedItems.push(item);
        };

        var unselectItem = function(item) {
          selectedItems = $.grep(selectedItems, function(i) {
            return i !== item;
          });
        };

        var groupSelectedItems = function() {
          if(!selectedItems.length || !confirm("确认聚合这些产品?"))
            return;
          console.log('selected items:',selectedItems);
          groupSelectedItemsFromDb(selectedItems);

          var $grid = $("#jsGrid");
          $grid.jsGrid("option", "pageIndex", 1);
          $grid.jsGrid("loadData");

          selectedItems = [];
        };

        var groupSelectedItemsFromDb = function(selectedItems) {
//              db.clients = $.map(db.clients, function(client) {
//                return ($.inArray(client, deletingClients) > -1) ? null : client;
//              });
          var attr = prompt('输入产品特点:');
          console.log(attr);
          var child_sn = [];
          for (var i=0; i<selectedItems.length; i++) {
            child_sn.push(selectedItems[i].sn);
          }
          var reqBody = {
            p_list: JSON.stringify(child_sn),
            feature: attr,
            remark: q,
          }
          console.log('reqbody:',reqBody);
          $.post('/api/product/feature/', reqBody, function (err, call) {
            console.log(call);
            if (call =='ok') {
                alert('新建成功')
            }
          })
        };
      })
    }
  })
</script>


